<template>
  <div v-if="isShowSuperBanner" class="capsule-wrap">
    <template v-for="(capsule, index) in sortCapsuleList">
      <component
        :is="capsule"
        :key="index"
        class="capsule"
        :moduleType="moduleType"
        :data="pick(capsule)"
        @click="handleItemClick"
      />
    </template>
  </div>
</template>

<script>
import _ from 'lodash';
import { goLink, http2https, formatImgUrl } from '@/utils/util';
import SuperBanner from './super-banner.vue';
import SmallSuperBanner from './small-super-banner.vue';
import ConjoinedSuperBanner from './conjoined-super-banner.vue';
import { resourceData1 } from '../../json/resource';

export default {
  name: 'capsule',
  components: {
    SuperBanner,
    SmallSuperBanner,
    ConjoinedSuperBanner
  },
  data() {
    return {
      capsuleList: ['SuperBanner', 'SmallSuperBanner', 'ConjoinedSuperBanner'],
      superBanner: [],
      smallSuperBanner: [],
      conjoinedSuperBanner: resourceData1.data.conjoinedSuperBannerList,
      pluginCards: [],
      moduleType: resourceData1.data.moduleType,
      moduleId: resourceData1.data.moduleId
    };
  },
  computed: {
    colType() {
      return this.moduleType + 1;
    },
    sortCapsuleList() {
      const list = _.orderBy(this.capsuleList, identity => {
        if (this[_.camelCase(identity)][0]) {
          return this[_.camelCase(identity)][0].resourceLocation || 0;
        }
        return 0;
      });
      return list;
    },
    // 是否展示胶囊位
    isShowSuperBanner() {
      return (
        this.smallSuperBanner.length > 0 ||
        this.superBanner.length > 0 ||
        this.conjoinedSuperBanner.length > 0
      );
    }
  },
  methods: {
    bgImage(imgUrl) {
      const width = this.moduleType === 1 ? 177 : 118; // 根据iOS最大宽度换算而来 （120/375）* 414
      const height = this.moduleType === 1 ? 143 : 128;
      if (imgUrl) {
        imgUrl = formatImgUrl(imgUrl.split(',')[0], width, height);
        return http2https(imgUrl);
      }
      return '';
    },
    handleItemClick(item) {
      const { ringshopLinkUrl } = item || {};
      if (ringshopLinkUrl) {
        if (item.skipType === 2) {
          // 跳活动
          this.$router.push({
            path: 'brand',
            query: {
              activityNo: ringshopLinkUrl
            }
          });
          return;
        }
        goLink(ringshopLinkUrl, (params, path) => {
          if (path === 'index') {
            return;
          }
          this.$router.push({
            path,
            query: {
              ...params,
              shopId: this.$route.query.shopId
            }
          });
        });
      }
    },
    pick(key) {
      return this[_.camelCase(key)];
    }
    /*getIndexResData() {
      const moduleId = this.$route.query.moduleId || '';
      dashboard
        .getIndexResData({ moduleId })
        .then(res => {
          const { data, success } = res || {};
          if (success) {
            const {
              pluginCards,
              superBanner,
              smallSuperBanner,
              conjoinedSuperBanner,
              moduleType
            } = data || {};
            this.moduleType = moduleType || 1;
            this.superBanner = superBanner || [];
            this.smallSuperBanner = smallSuperBanner || [];
            this.conjoinedSuperBanner = conjoinedSuperBanner || [];
            let newInsertCardList = pluginCards || [];
            newInsertCardList = newInsertCardList.sort(
              (a, b) => a.location - b.location
            );
            this.pluginCards = newInsertCardList.map(item => {
              item.isInsertCard = true;
              return item;
            });
            this.$emit('savePlugin', this.pluginCards);
          }
        })
        .catch(() => {
          // todo
        });
    }*/
  }
};
</script>

<style lang="scss" scoped>
.capsule-wrap {
  padding: 0 10px 2px;
  background-color: #f5f5f5;
  .capsule + .capsule {
    margin-top: 10px;
  }
}
</style>
